<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/src/css/main.css" media="all">
</head>

<body>
    <div id="layui-body-content" class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form layui-form-pane">
                    <div class="gridAuto">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <div class="layui-input-wrap">
                                    <input type="text" name="username" placeholder="请输入用户名" lay-affix="clear"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">请求方法</label>
                            <div class="layui-input-block">
                                <div class="layui-input-wrap">
                                    <input type="text" name="actiontypename" placeholder="请输入请求方法" lay-affix="clear"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">方法描述</label>
                            <div class="layui-input-block">
                                <div class="layui-input-wrap">
                                    <input type="text" name="displaytitle" placeholder="请输入方法描述" lay-affix="clear"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">IP地址</label>
                            <div class="layui-input-block">
                                <div class="layui-input-wrap">
                                    <input type="text" name="ip" placeholder="请输入IP地址" lay-affix="clear"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-btn-container selectFormBox">

                        <button class="layui-btn layuiadmin-btn-menu-list  layui-btn-sm" type="button" lay-submit
                            lay-filter="table-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                            <i class="layui-icon layui-icon-fonts-clear"></i>清空
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-normal" type="button" lay-on="Yjadd">
                            <i class="layui-icon layui-icon-add-circle layuiadmin-button-btn"></i>添加
                        </button>
                    </div>
                </form>

                <table id="LAY-app-menu-list" lay-filter="LAY-app-menu-list"></table>


                <script id="LAY-app-menu-toolbar" type="text/html">
                    <div class="layui-clear-space">
                        <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
                    </div>
                </script>
            </div>
        </div>
    </div>

    <script src="/layui/layui.js"></script>
    <script>
        layui.config({
            base: '/src/'
        }).use('index', function () {
            var table = layui.table,
                $ = layui.$,
                $body = $('body'),
                main = layui.main,
                dropdown = layui.dropdown,
                form = layui.form,
                util = layui.util,
                layer = layui.layer,
                admin = layui.admin,
                $inputVal = $('#scene-select #InputValue'),
                yj_system_log = {
                    setRootPath: function (url) {
                        rootPath = setter.views + url + '/';
                    },
                    setEmptyQueryKey: function () {
                        let queryKey = {};
                        $("dl dd").each(function (index, item) {
                            queryKey[$(item).attr('lay-value')] = '';
                        });
                        return queryKey;
                    }
                };

            // 通用获取URL参数方法
            function getQueryParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURIComponent(r[2]);
                return null;
            }
            var type = getQueryParam('type');
            table.render({
                elem: '#LAY-app-menu-list',
                url: admin.getUrl('syslog/GetLogList'),
                where: {
                    type: type,
                },
                cols: [[
                    {
                        type: 'numbers',
                        fixed: 'left',
                        title: '序号'
                    },
                    {
                        field: 'username',
                        title: '操作人',
                        width: 85
                    }
                    , {
                        field: 'actionname',
                        title: '控制器名称'
                    }, {
                        field: 'browser',
                        title: '浏览器'
                    }, {
                        field: 'actiontypename',
                        title: '操作名称'
                    }, {
                        field: 'displaytitle',
                        title: '详细操作'
                    }, {
                        field: 'remoteipv4',
                        title: 'IP地址'
                    }, {
                        field: 'traceid',
                        title: '客户端连接ID',
                        width: 300
                    }, {
                        field: 'threadid',
                        title: '线程ID',
                        width: 100
                    }, {
                        field: 'timeoperatime',
                        title: '耗时（毫秒）',

                    }, {
                        field: 'create_time',
                        title: '创建时间'
                    }, {
                        title: '操作',
                        width: 120,
                        align: 'center',
                        fixed: 'right',
                        toolbar: '#LAY-app-menu-toolbar'
                    }]
                ],
                height: 'full-200',
                page: true,
                limit: 20,
                done: function (res) {
                }
            });
            //查询
            form.on('submit(table-search)', function (data) {
                var field = data.field;
                data.field.type = type;
                table.reload('LAY-app-menu-list', {
                    where: field,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                return false; //阻止默认form 跳转
            });

            // 触发表格单元格工具事件
            table.on('tool(LAY-app-menu-list)', function (obj) { // 双击 toolDouble
                var data = obj.data; // 获得当前行数据
                if (obj.event === 'detail') {
                    admin.req({
                        url: 'syslog/GetLogInfoByID/' + data.id,
                        done: function (res) {
                            if (res.successful) {
                                if (res.data.allinfo) {
                                    var message = res.data.allinfo;
                                    layer.open({
                                        type: 1, // page 层类型
                                        area: ['60%', '90%'],
                                        title: '日志详情 - ' + data.actiontypename,
                                        shade: 0.6, // 遮罩透明度
                                        shadeClose: true, // 点击遮罩区域，关闭弹层
                                        maxmin: true, // 允许全屏最小化
                                        anim: 0, // 0-6 的动画形式，-1 不开启
                                        content: `
                                                <div style="padding: 20px;">
                                                    <pre style="
                                                        margin: 0;
                                                        font-family: Consolas, 'Courier New', monospace;
                                                        font-size: 13px;
                                                        line-height: 1.5;
                                                        background: #2d2d2d;
                                                        color: #e0e0e0;
                                                        padding: 20px;
                                                        border-radius: 4px;
                                                        max-height: 70vh;
                                                        overflow: auto;
                                                        white-space: pre-wrap;
                                                    ">${message}</pre>
                                                </div>
                                            `
                                    });
                                }

                            }
                        }
                    });

                }
            });
            /* 导出弹出层 */
            $body.on("click", ".open-popup-export", function () {
                main.exportPopup();
            });

            /* 关闭弹出层 */
            $(".close-popup").click(function (e) {
                e.preventDefault();
                parent.layer.close(window.parent.layerIndex);
            });


        })
    </script>
</body>

</html>